<template>
  <div class="tw-camera">
  <div type="text" style="position:relative">
    <video-player
      :key="index"
      class="m-vedio-item video-player vjs-custom-skin"
      ref="videoPlayer1"
      :options="playerOptions1"
      @play="onPlayerPlay1($event)"
      @pause="onPlayerPause1($event)">
    </video-player>
    <!-- <div @click="dialogCarema(currentCarema)" style="position:absolute;width:260px;height:115px;top:0;left:0;z-index:2"></div> -->
    <div @click="dialogCarema(currentCarema)" style="position:absolute;width:40px;height:30px;bottom:0;right:0;z-index:2"></div>
  </div>

  <el-dialog :title="title" :visible.sync="dialogCaremaVisible" width="100%" custom-class="xdialog" :fullscreen="fullscreen" @close="closeDialog" :show-close="showclose=false">
     <div style="display:flex;align-items: center;justify-content: center;min-height: 70vh; background: rgba(5, 16, 52, 0.6);" >
        <div class="player">
          <video-player
            :key="playerOptions.sources[0].src"
            class="video-player vjs-custom-skin"
            ref="videoPlayer"
            :options="playerOptions"
            @play="onPlayerPlay($event)"
            @canplay="onCanplay($event)"
            @ready="onPlayerReady($event)"
            @pause="onPlayerPause($event)">
          </video-player>
        </div>
      </div>

      <div class="m-back-index" @click="closeDialog" v-if="dialogCaremaVisible">
        <img src=""/>
      </div>
    </el-dialog>
  </div>

</template>

<script scoped>
import imgback from '@assets/images/a1.png'
import 'video.js/dist/video-js.css'
import VideoPlayer from 'vue-video-player'
// import 'videojs-flash'
import 'videojs-contrib-hls'
Vue.use(VideoPlayer)

export default {
  name: 'tw-camera',

  props: {
    currentCarema: {
      type: Object
    },
    cameraError: {
      type: Boolean
    },
    index: {
      type: Number,
      default: 0,
    },
    cameraVisible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      autoPlay: false,
      title: "视频监控",
      playerOptions1: {
        height: '146',
        width: '260',
        autoplay: false,
        language: 'zh-CN',
        sources: [{
          type: 'application/x-mpegURL',
          src: ''
        }],
        controlBar: {
          timeDivider: false,
          durationDisplay: false
        },
        flash: { hls: { withCredentials: false } },
        html5: { hls: { withCredentials: false } },
        poster: imgback,
        notSupportedMessage: '抱歉，您访问的视频暂时无法播放！'
      },
      playerOptions: {
        height: '600',
        autoplay: true,
        language: 'zh-CN',
        sources: [{
          type: 'application/x-mpegURL',
          src: ''
        }],
        controlBar: {
          timeDivider: false,
          durationDisplay: false
        },
        flash: { hls: { withCredentials: false } },
        html5: { hls: { withCredentials: false } },
        poster: '',
        notSupportedMessage: '抱歉，您访问的视频暂时无法播放！'
      },
      active: 0,
      currentStep: 0,
      cameras: [],
      dialogCaremaVisible: this.cameraVisible,
      fullscreen: true
    }
  },
  methods: {
    dialogCarema (currentCarema) {
      this.dialogCaremaVisible = true
      this.title = currentCarema.title
      this.$refs.videoPlayer1.player.ended()
      // this.$refs.videoPlayer1.player.dispose()
      this.playerOptions.sources[0].src = currentCarema.url
      // console.log(currentCarema)
    },
    // handelClose () {
    //   this.dialogCaremaVisible = false
    // },
    onPlayerPlay (player) {
      // console.log('')
    },
    onPlayerPause (player) {
      // console.log('')
    },
    onPlayerPlay1 (player) {
      // console.log('')
    },
    onPlayerReady (player) {
      console.log('playready', play)
      this.$refs.videoPlayer.player.play()
    },
    onCanplay () {
      console.log('canplay', play)
    },
    onPlayerPause1 (player) {
      // console.log('')
    },
    closeDialog () {
      this.$refs.videoPlayer.player.ended()
      this.dialogCaremaVisible = false
      // this.$refs.videoPlayer.player.dispose()
      if (this.index === 0) {
        this.$refs.videoPlayer1.player.play()
      } else {
        this.$refs.videoPlayer1.player.pause()
        // this.$refs.videoPlayer1.player.dispose()
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.playerOptions1.sources[0].src = this.currentCarema.url
      this.title = this.currentCarema.title
      this.playerOptions1.autoplay = this.index === 0 ? true : false
    })
  },
  beforeDestroy () {
    this.$refs.videoPlayer1.player.ended()
    // this.$refs.videoPlayer1.player.dispose()
  }
}
</script>

<style>
.tw-camera .m-camera {
  width:260px;
  height:146px;
  margin-bottom: 20px;
}
.tw-camera .xdialog {
  background: rgba(0,0,0,0.9);
  text-align: center;
}
.tw-camera .xdialog .el-dialog__title {
  color: #bad3ff;
  font-size: 40px;
  line-height: 40px;
}
.xdialog .el-dialog__header {
  padding: 20px;
}
.vjs-error .vjs-error-display .vjs-modal-dialog-content  {
  padding-top: 330px;
}
.m-vedio-item .video-js .vjs-icon-placeholder {
  width:260px;
  height:146px;
  display: block;
}
.tw-camera .m-vedio-item {
  margin-bottom: 20px;
}
.tw-camera .vjs-big-play-button {
  top: 45%;
  left: 45%;
}
.m-vedio-item .vjs-big-play-button {
  top: 35%;
  left: 34%;
}
.m-vedio-item .vjs-error .vjs-error-display .vjs-modal-dialog-content  {
  padding-top: 30px;
}
</style>
